<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <div>
            <table border="border">
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>总价</td>
                </tr>
                <tr v-for="i,index in items">
                    <td>{{ i.id }}</td>
                    <td>{{ i.name }}</td>
                    <td>{{ i.price }}</td>
                    <td><input type="button" value="-" @click="decr(index)">{{ i.count }}<input type="button" value="+" @click="incr(index)"></td>
                    <td>{{ (i.count*i.price).toFixed(2) }}</td>
                </tr>
            </table>
        </div>
        <h4>购物车合计：{{getTotalPrice}}</h4>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg: "study vue template",
            items:[
                {id:11,name:"雅迪电动车",price:1499.89,count:1},
                {id:22,name:"爱玛电动车",price:1599.89,count:1}
            ]
        },
        methods:{
            decr(index){
                if(this.items[index].count<=0){
                    alert("不能再减了");
                    return;
                }
                this.items[index].count--;
            },
            incr(index){
                this.items[index].count++;
            },

        },
        computed:{
            getTotalPrice(){
                var total =0;
                for(var i=0;i<this.items.length;i++){
                    total += this.items[i].price * this.items[i].count;
                }
                return total.toFixed(2);
            }
        },
    });
</script>